<template>
  <div>
    <el-container>
      <el-header>
        <span>onebank后台管理系统</span>
      </el-header>
      <el-tabs :tab-position="tabPosition" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="nav" name="first">navi Edit</el-tab-pane>
        <el-tab-pane label="section" name="second">Section Edit</el-tab-pane>
        <el-tab-pane label="page" name="third">
          <el-table
            :data="tableData"
            stripe
            style="width: 100%">
            <el-table-column
              prop="tittle"
              label="标题"
              width="180">
            </el-table-column>
            <el-table-column
              prop="date"
              label="日期"
              width="180">
            </el-table-column>
            <el-table-column
              prop="content"
              label="内容">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.$index, scope.row)" type="text" size="small">编辑</el-button>
                <el-button @click="handleDelete(scope.$index)" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div>
            <!-- <el-button type="primary" @click="dialogVisible1 = true">添加</el-button> -->
            <el-button type="primary"  @click="pagepush">添加</el-button>
            <!-- <el-dialog
                title=""
                :visible.sync="dialogVisible1"
                @close="init"
                :before-close="handleClose1">
                <div>
                  <el-form ref="form"  :model="form" label-width="80px">
                    <el-form-item label="标题">
                      <el-input v-model="page.tittle" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="正文">
                      <el-input type="textarea" placeholder="请输入内容" v-model="page.content"></el-input>
                    </el-form-item>
                    <el-form-item label="日期">
                      <el-date-picker
                        v-model="page.date"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期">
                      </el-date-picker>
                    </el-form-item>
                  </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="dialogVisible1 = false">确定</el-button>
                </span>
              </el-dialog> -->
          </div>
        </el-tab-pane>
        <el-tab-pane label="banner" name="fourth">banner Mng</el-tab-pane>
        <el-tab-pane label="admin" name="fifth">admin Mng</el-tab-pane>
      </el-tabs>
    </el-container>
  </div>
</template>
<script>
import {addFile ,queryFile} from "@/api"
export default {
  name: "app",
  data() {
    return {
      dialogVisible: true,
      dialogVisible1: false,
      form:{
        name:'',
        password:''
      },
      page:{
        tittle:'',
        content:'',
        date:''
      },
      tabPosition: 'left',
      activeName: 'third',
      tableData: [{
          id:1,
          date: '2016-05-02',
          tittle: '标题1',
          content: '上海市普陀区金沙江路 1518 弄'
        },  {
          id:2,
          date: '2016-05-03',
          tittle: '标题2',
          content: '上海市普陀区金沙江路 1516 弄'
        }]
    };
  },
  created() {
  },
  mounted() {
    this.queryData()  
  },
  methods:{
      async queryData() {
          let data = await queryFile();
          console.log(data)
      },
      pagepush (){
          this.$router.push({ path: "/home/ckeditor" });
          // console.log(1)
      },

      handleClose1(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      handleClick(index, row) {
        console.log(index, row);
      },
      handleDelete(index) {
       let data= this.tableData.splice(index, 1);
       console.log(data[0].id)
      }
  }
}
</script>

<style lang="scss">
// .el-dialog__wrapper{
//   background-color: #ccc;
// }
.el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
    min-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    // line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

</style>
